<template>
  <view class="recharge-detail-container">
    <scroll-view class="scroll-box" scroll-y>
      <view class="banner-box" v-if="rechargeDetailInfo.image">
        <image :src="rechargeDetailInfo.image" mode=""></image>
      </view>
      <view class="rechange-info">
        <view class="name">{{ rechargeDetailInfo.name || '超值充值活动' }}</view>
        <view class="time">{{ rechargeDetailInfo.startTime || '' }} {{ rechargeDetailInfo.endTime || '' }}</view>
        <view class="desc">{{ rechargeDetailInfo.remark || '' }}</view>
      </view>

      <view class="recommend-box" v-if="recommendList.length > 0">
        <view class="title"><view>充值推荐</view></view>
        <scroll-view scroll-x class="item">
          <view @click="$u.route('/pages/user/recharge/recharge_detail?id=' + item.id)" class="activity-item" v-for="item in recommendList" :key="item.id">
            <view style="font-size: 35rpx; margin-top: 30rpx; font-weight: 600">{{ item.depositMoney + '元' || '充值优惠' }}</view>
            <view style="font-size: 25rpx; margin-top: 20rpx; color: #999999; white-space: normal">
              <text v-if="item.couponCount">赠送{{ item.couponCount }}张券</text>
              <text v-if="item.giveMoney">赠送{{ item.giveMoney }}元</text>
            </view>
          </view>
        </scroll-view>
      </view>

      <view class="gift-amount" v-if="couponList.length > 0">
        <GiftCouponVue title="赠送优惠券" :couponList="couponList"></GiftCouponVue>
      </view>

      <view class="activity-info" v-if="rechargeDetailInfo.introduce">
        <view class="title"><view>活动说明</view></view>
        <view class="content" v-html="rechargeDetailInfo.introduce"></view>
      </view>
    </scroll-view>

    <view class="footer">
      <view class="price">
        <view style="color: #e26c4c; font-size: 40rpx">
          <text style="font-size: 23rpx">到账</text>
          ￥{{ rechargeDetailInfo.depositMoney + rechargeDetailInfo.giveMoney }}
        </view>
        <view style="font-size: 30rpx; margin-left: 10rpx; color: darkgray">
          <text style="font-size: 23rpx">赠送</text>
          ￥{{ rechargeDetailInfo.giveMoney }}
        </view>
        <view style="flex: 1; color: #e26c4c; font-size: 40rpx; text-align: right">
          <text style="font-size: 23rpx">实付</text>
          ￥{{ rechargeDetailInfo.depositMoney }}
        </view>
      </view>

      <view class="btn">
        <u-button type="primary" @click="goRefillPay">立即充值</u-button>
      </view>
    </view>
  </view>
</template>

<script>
import GiftCouponVue from './components/GiftCoupon.vue';
import { refillPay } from '@/common/util.js';
export default {
  components: { GiftCouponVue },
  data() {
    return {
      couponList: [],
      recommendList: [],
      rechargeDetailInfo: {
        giveMoney: 0,
        depositMoney: 0
      }
    };
  },
  onLoad({ id }) {
    this.getRechargeDetail(id);
  },
  methods: {
    async getRechargeDetail(id) {
      const res = await this.$api.getRechargeDetail({ id });
      this.couponList = res.data.ruleObject.couponList;
      this.rechargeDetailInfo = res.data.ruleObject;
      this.recommendList = res.data.recommendList;
      // console.log(this.couponList,this.recommendList);
    },
    goRefillPay() {
      refillPay(0, {
        id: this.rechargeDetailInfo.id,
        money: this.rechargeDetailInfo.depositMoney,
        giftAmount: this.rechargeDetailInfo.giveMoney
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.recharge-detail-container {
  height: 100vh;

  .scroll-box {
    height: calc(100% - 250rpx);
    background-color: #ffffff;

    .banner-box {
      width: 100%;
      height: 500rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }

    .rechange-info {
      padding: 30rpx;

      .name {
        font-size: 40rpx;
        font-weight: 600;
      }

      .time {
        font-size: 22rpx;
        color: #a2a2a4;
        margin-top: 10rpx;
      }

      .desc {
        font-size: 28rpx;
        color: #a2a2a4;
        margin-top: 10rpx;
      }
    }

    .recommend-box {
      padding: 20rpx;
      white-space: nowrap;
      .item {
        width: 100%;
        .activity-item {
          display: inline-block;
          border: 2rpx solid #efb43f;
          background-color: #fff8ed;
          border-radius: 10rpx;
          box-sizing: border-box;
          padding: 20rpx;
          width: 33%;
          height: 210rpx;
          margin-right: 20rpx;
          text-align: center;
          overflow: hidden;
        }
      }
    }

    .gift-amount {
      padding: 20rpx;
    }

    .activity-info {
      background-color: #fff;
      min-height: 500rpx; // 删除
      padding: 0 30rpx 20rpx;
      width: 100%;
      .content {
        overflow: auto;
        background-color: #fff;
        width: 100%;
      }
    }
  }

  .footer {
    padding: 30rpx;
    height: 250rpx;
    border-top-right-radius: 15rpx;
    border-top-left-radius: 15rpx;
    background-color: #fff;

    .price {
      display: flex;
      align-items: center;
    }
    .btn {
      margin-top: 30rpx;
    }
  }
  .title {
    padding: 30rpx 10rpx;
    font-size: 35rpx;
    font-weight: 600;
    & > view {
      padding-left: 20rpx;
      border-left: 4rpx solid #edac2f;
    }
  }
}
</style>
